<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>海鲜街</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../fonts/css/mui.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../fonts/css/app.css" />
		<link rel="stylesheet" type="text/css" href="../fonts/css/iconfont.css" />
		<style>
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
			
			.detailfront {
				line-height: 2.5;
				color: #555555;
				font-size: 16px;
			}
			
			.pricefront {
				color: orange;
				font-size: 20px;
				font-weight: 600;
				line-height: 1.42;
			}
			
			.mui-popover {
				min-height: 420px;
			}
		</style>

		<script type="text/html" id="productDetailTemplate">
			<li class="mui-table-view-cell">
				<img width="100%" data-src="productDetail.imageUrl">
				<span class="detailfront" data-content="productDetail.shortDesc"></span>
				<br>
				<span class="pricefront">￥<span data-content="productDetail.priceRange" ></span></span>

			</li>
			<li class="mui-table-view-cell">
				<div class="goods-detail js-goods-detail">
					<h4 class="title">商品详情</h4>
					<div class="rich-text" data-content="productDetail.longDesc">
					</div>
				</div>
			</li>
		</script>
		<script type="text/html" id="productPriceTemplate">
			<img class="mui-media-object mui-pull-left" data-src="productDetail.imageUrl">
			<span class="detailfront" data-content="productDetail.shortDesc"></span>
			<span class='pricefront' style="padding-top: 10px;" id="selectPrice">￥<span data-content="productDetail.priceRange" id="selectPrice"></span></span>

		</script>
		<script type="text/html" id="productSpecTemplate">
			<li class="mui-table-view-cell mui-media specGroup">
				<p class="detailfront" data-content="rootSpec.spec"></p>
				<div class="mui-content-padded" data-content="childSpec" data-format="nestedTemplateFormatter" data-format-options="#productSpecItemTemplate">
				</div>
			</li>
		</script>
		<script type="text/html" id="productSpecItemTemplate">
			<button type="button" class="mui-btn specBtn" data-content="spec" style="margin-right: 5px;" data-attach="id" data-value="rootSpec">
			</button>
		</script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<div>
				<span style="margin-left: 10;line-height: 2.5;color:#555555;font-size: 16px;">主页</span>

				<span style="float:right;margin-right: 10px;line-height: 2.5;color:#555555;font-size: 16px;" id="orderList">| 订单中心</span>

				<span style="float:right;margin-right: 5px;color:#555555;width: 10;height: 10px;" class="mui-icon iconfont icon-gouwuche" id="prodcutCart"><span class="mui-badge" id="productCartNum"></span></span>
			</div>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#tabbar" id="navhome">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-chat" id="collectA">
				<span class="mui-icon mui-icon-star-filled"></span>
				<span class="mui-tab-label">收藏</span>
			</a>
			<a class="mui-tab-item" href="#specDiv" id="addCart">
				<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">
					加入购物车
				</button>
			</a>
			<a class="mui-tab-item" href="#specDiv" id="addShopping">
				<button type="button" class="mui-btn mui-btn-danger">立即购买</button>
			</a>
		</nav>

		<div id="productDetail" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<ul class="mui-table-view" id="productionDetailContainer">

				</ul>
			</div>
		</div>

		<!--右下角弹出菜单-->
		<div id="specDiv" class="mui-popover mui-popover-bottom" style="width: 100%;">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media" id="productionPriceContainer">

						</li>

						<div id="productSpecContrainer">

						</div>
						<li class="mui-table-view-cell mui-media">
							<p class="detailfront">购买数量</p>
							<div class="mui-numbox">
								<button class="mui-btn mui-btn-numbox-minus" type="button" id="minusProduct">-</button>
								<input class="mui-input-numbox" type="number" value="1" id="productNum" readonly="true" />
								<button class="mui-btn mui-btn-numbox-plus" type="button" id="plusProduct">+</button>

							</div>
							<div style="float: right;">
								<button type="button" id="confirmSpec" class="mui-btn mui-btn-danger">
									确定
								</button>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script src="../js/jquery-1.10.1.min.js"></script>
	<script src="../js/jquery.loadTemplate-1.4.4.min.js"></script>
	<script src="../busi/js/ajax.js"></script>
	<script src="../js/jquery.url.js"></script>
	<script src="../busi/index/prodetail.js"></script>

</html>